<!--
  功能：图标选择
  时间：2023年05月17日 11:25:30
-->
<template>
  <el-popover title="图标选择" :width="420" trigger="hover" placement="right">
    <div class="flex layer-icon">
      <div
        class="iconfont"
        :class="json.css_prefix_text + v.font_class"
        v-for="(v, i) in json.glyphs"
        :key="i"
        @click="pickFn(json.css_prefix_text + v.font_class)"
      ></div>
    </div>
    <template #reference>
      <el-input :model-value="modelValue" placeholder="请输入或选择图标">
        <template #append>
          <div class="iconfont custom-icon-biaoqing"></div>
        </template>
      </el-input>
    </template>
  </el-popover>
</template>

<script lang="ts" setup>
import json from "@/assets/iconfont/iconfont.json";

const emit = defineEmits<{
  (e: "update:modelValue", data: any): void; //向父组件更新排序或删除的数据
}>();

interface IProps {
  modelValue: string;
}
defineProps<IProps>();

function pickFn(icon: string) {
  emit("update:modelValue", icon);
}
</script>

<style scoped lang="scss">
:deep(.el-input-group__append) {
  padding: 0 10px;
}
.custom-icon-biaoqing {
  font-size: 25px;
  cursor: pointer;
}
.layer-icon {
  flex-wrap: wrap;
  .iconfont {
    font-size: 26px;
    color: #555;
    width: 38px;
    height: 38px;
    text-align: center;
    line-height: 38px;
  }
  .iconfont:hover {
    color: var(--el-color-primary);
    cursor: pointer;
  }
}
</style>
